<template>
	<view class="my-award">
		<image class="top-img" :src="yxbjbjt" mode="widthFix"></image>
		<view class="m-a-boy">
			<view class="m-a-box">
				<view class="a-b-text">
					{{awardData.excellence_award.title || ''}}
				</view>
				<view class="a-b-text1">
					<text class="b-text">{{awardData.excellence_award.value || ''}}</text>
				</view>
			</view>
			<view class="m-a-box">
				<view class="a-b-text">
					{{awardData.report_award.title || ''}}
				</view>
				<view class="a-b-text1">
					<text class="b-text">{{awardData.report_award.value || ''}}</text>
				</view>
			</view>
			<view class="m-a-box m-a-box1">
				<view class="a-b-title">
					奖励记录
				</view>
				<view class="a-b-tabl">
					<view class="b-tag">
						<uni-data-checkbox :selected-textColor="'#ffffff'" mode="tag" v-model="radio" :localdata="sex" @change="onChange"></uni-data-checkbox>
					</view>
					<view class="b-tag1">
						<view v-for="(tab,index) in tabBars" :key="tab.id" class="uni-tab-item" :id="tab.id" :data-current="index"
							@click="ontabtap">
							<text class="uni-tab-item-title"
								:class="tabIndex == index ? 'uni-tab-item-title-active' : ''">{{tab.name}}</text>
							<text v-show="tabIndex == index" class="uni-tab-item-text"></text>
						</view>
					</view>
					<template v-if="state">
						<view class="m-r-card1">
							<view class="r-c-th">
								<uni-row>
									<uni-col :span="6">员工姓名</uni-col>
									<uni-col :span="12">时间</uni-col>
									<uni-col :span="6">金额</uni-col>
								</uni-row>
							</view>
							<view class="r-c-td" v-if="data.tableData.length">
								<view class="r-c-td">
									<uni-row v-for="(item, index) in data.tableData" :key="item.id">
										<uni-col :span="6">{{ item.real_name || item.nickname || '' }}</uni-col>
										<uni-col :span="12">{{ item.create_time || '' }}</uni-col>
										<uni-col :span="6">￥{{item.price || '0.00'}}</uni-col>
									</uni-row>
									<uni-load-more :contentText="contentText" :status="data.status" @clickLoadMore="loadClick()"></uni-load-more>
								</view>
							</view>
						</view> 
					</template>
					<view style="width: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;flex: 1;" v-else>
						<image :src="zanwudingdan" mode="widthFix" style="width: 360rpx;height: 416rpx;"></image>
						<text style="font-size: 32rpx;font-weight: 500;color: #777777;margin: 50rpx 0 150rpx;">暂无数据!</text>
					</view>	
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				zanwudingdan:`${getApp().globalData.imgScr}bj/zanwudingdan.png`,
				yxbjbjt:`${getApp().globalData.imgScr}bj/yxbjbjt.png`,
				radio:1, // 日期选择器的状态 1：每天 2：每周 3：每月
				sex: [{ // 日期选择器的数据
					text: '今日',
					value: 1
				}, {
					text: '本周',
					value: 2
				}, {
					text: '本月',
					value: 3
				}],
				tabIndex: 0, // 奖励切换栏状态 0：优秀保洁奖励 1：举报奖励
				tabBars: [{ // 奖励切换栏 数据
					name: '优秀员工奖励',
					id: 'yxbjjl'
				}, {
					name: '举报奖励',
					id: 'jbjl'
				}],
				awardData:{}, // 奖励政策
				state:true,
				data:{
					tableData:[], // 奖励记录列表数据
					page:1, // 初始页码
					total:0, // 数据总条数
					status:'more', // 加载更多组件的状态  more：加载前 loading：加载中 noMore：没有更多数据
				},
				contentText:{contentdown: "点击加载更多",contentrefresh: "正在加载...",contentnomore: "没有更多数据了"}, // 加载更多组件的提示文本
				
			}
		},
		onLoad() {
			this.getAward()
			this.getList()
		},
		methods: {
			/**
			 * 日期切换栏数据发生变化时触发
			 * @param {Object} e 当前选项的value值
			 */
			onChange(e) {
				Object.assign(this.data, this.$options.data().data)
				this.radio = e.detail.value
				this.getList(this.radio,this.tabIndex*1 + 2)
			},
			/**
			 *  切换时触发
			 * @param {object} e  获取切换元素的实例
			 */
			ontabtap(e) {
				Object.assign(this.data, this.$options.data().data)
				this.tabIndex = e.target.dataset.current || e.currentTarget.dataset.current;
				let type = this.tabIndex*1 + 2
				this.getList(this.radio,type)
			},
			/**
			 * 点击加载更多组件时触发
			 * @param {Object} e 点击时的状态
			 */
			loadClick(e) {
				if(e.detail.status == 'no-more') return this.data.status = "no-more"
				this.data.status = "loading"
				this.data.page += 1
				this.getList(this.radio,this.tabIndex*1 + 2,this.data.page )
			},
			/**
			 * 获取奖励记录列表数据
			 */
			async getList(datetype = 1,type = 2,page = 1,limit = 10){
				try{
					let res = await this.$http.get('/index/Cleanerindex/reward_list',{
						datetype,
						type,
						page,
						limit
					})
					this.data.tableData = [...this.data.tableData,...res.data]
					this.data.total = res.total
					this.state = this.data.tableData.length
					if(this.data.page >= res.last_page) return this.data.status = 'no-more'
					this.data.status = 'more'
				}catch(e){
					this.state = false
					uni.showToast({
						title: e.errMsg,
						icon:"none"
					})
				}
			},
			/**
			 * 获取奖励政策数据
			 */
			async getAward(){
				try{
					let res = await this.$http.get('/index/Communal/config_data',{config_id:7})
					this.awardData = res
				}catch(e){
					uni.showToast({
						title: e.errMsg,
						icon:"none"
					})
				}
			}
		}
	}
</script>

<style lang="scss">
.my-award {
	position: relative;
	display: flex;
	width: 100%;
	// 背景图片样式
	.top-img {
		width: 100%;
		margin: 0;
		padding: 0;
	}
	// 中间数据展示栏样式
	.m-a-boy {
		position: absolute;
		top: 750rpx;
		left: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		// 规则栏样式
		.m-a-box {
			display: flex;
			width: 664rpx;
			height: 206rpx;
			box-shadow: 0px 6rpx 0px 0px #17b36c;
			background-color: #F6F7FF;
			border: 0;
			border-radius: 14rpx;
			margin-bottom: 40rpx;
			overflow: hidden;
			// 规则栏标题样式
			.a-b-text {
				width: 64rpx;
				height: 100%;
				font-size: 28rpx;
				font-weight: 500;
				color: #44D48E;
				text-align: center;
				line-height: 64rpx;
				writing-mode: vertical-lr;
				text-orientation: upright;
				background-color: #D3F9E2;
			}
			// 规则栏内容样式
			.a-b-text1 {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				box-sizing: border-box;
				height: 100%;
				padding: 0 20rpx;
				.b-text {
					font-size: 28rpx;
					font-weight: 500;
					color: #333333;
					line-height: 1.8em;
				}
				.b-text1 {
					margin-bottom: 0;
				}
			}
		}
		// 底部表格信息栏样式
		.m-a-box1 {
			display: flex;
			flex-direction: column;
			align-items: center;
			height: 936rpx;
			margin-top: 40rpx;
			margin-bottom: 0;
			background-color: #ffffff;
			overflow: visible;
			// 标题栏样式
			.a-b-title {
				position: relative;
				top: 0;
				transform: translateY(-50%);
				width: 306rpx;
				height: 68rpx;
				font-size: 32rpx;
				font-weight: 600;
				color: #ffffff;
				text-align: center;
				line-height: 68rpx;
				background: linear-gradient(0deg, #53E48D, #53E48D);
				box-shadow: 0px 4rpx 10rpx 0px rgba(72, 220, 152, 0.48);
				border-radius: 14rpx;
			}
			// 表格栏样式
			.a-b-tabl {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 100%;
				overflow: hidden;
				// 日期状态选择栏样式
				.b-tag {
					.checklist-group {
						border: 1px solid #53E48D;
						border-radius: 14rpx;
						background-color: #FFFFFF;
						overflow: hidden;
						.checklist-box {
							border: 0;
							margin: 0;
							padding: 20rpx 30rpx;
							.checklist-text {
								font-size: 28rpx;
								font-weight: 500;
								color: #333333;
							}
						}
						.is-checked  {
							background: linear-gradient(101deg, #53E48D 0%, #53E48D 100%);
						}
					}
				}
				// 奖励状态选择栏样式
				.b-tag1 {
					display: flex;
					align-items: center;
					width: 100%;
					height: 100rpx;
					margin-bottom: 20rpx;
					.uni-tab-item {
						position: relative;
						flex: 1;
						display: inline-block;
						text-align: center;
					}
					
					.uni-tab-item-title {
						color: rgba($color: #333333, $alpha: 0.7);
						font-size: 28rpx;
						height: 80rpx;
						line-height: 80rpx;
						opacity: 0.7;
					}
					.uni-tab-item-text {
						position: absolute;
						bottom: 0rpx;
						left: 50%;
						transform: translateX(-50%);
						height: 4rpx;
						width: 36rpx;
						background: linear-gradient(255deg, #8dc9f1, #d8eefc);
						border-radius: 2rpx;
					}
					// 中间内容选项卡 字体样式
					.uni-tab-item-title-active {
						color: #333333;
						font-size: 30rpx;
						font-weight: 600;
					}
				}
			// 	// 表格样式
			// 	.b-tabl {
			// 		display: flex;
			// 		flex-direction: column;
			// 		align-items: center;
			// 		width: 100%;
			// 		flex: 1;
			// 		overflow: hidden;
			// 		.uni-table {
			// 			min-width: 500rpx!important;
			// 			width: 590rpx;
			// 			.uni-table-tr {
			// 				border-radius: 14rpx;
			// 				overflow: hidden;
			// 				.uni-table-th {
			// 					font-size: 24rpx;
			// 					font-weight: 600;
			// 					color: rgba($color: #000000, $alpha: 0.9);
			// 					border: 0;
			// 					background-color: #F9F9F9;
			// 				}
			// 				.uni-table-td {
			// 					font-size: 24rpx;
			// 					font-weight: 500;
			// 					color: rgba($color: #000000, $alpha: 0.7);
			// 					border-bottom: 1rpx solid #F6F6F6;
			// 				}
			// 			}
						
			// 		}
			// 		.tabld-hd {
			// 			.uni-table-loading {
			// 				display: none;
			// 			}
			// 		}
			// 		.tabld-body {
			// 			flex: 1;
			// 			margin-bottom: 20rpx;
			// 			overflow: auto;
			// 		}
			// 	}
			// }
			// 表格样式
			.m-r-card1 {
				display: flex;
				flex-direction: column;
				flex: 1;
				box-sizing: border-box;
				width: 100%;
				padding: 32rpx;
				background-color: #FFFFFF;
				overflow: hidden;
				.r-c-th {
					height: 68rpx;
					border-radius: 8rpx;
					background-color: #F9F9F9;
					.uni-row {
						.uni-col {
							line-height: 68rpx;
							font-size: 24rpx;
							font-weight: 600;
							color: rgba($color: #000000, $alpha: 0.9);
							text-align: center;
						}
					}
				}
				.r-c-td {
					flex: 1;
					border-radius: 8rpx;
					overflow: auto;
					.uni-row {
						.uni-col {
							line-height: 80rpx;
							font-size: 24rpx;
							font-weight: 500;
							color: rgba($color: #000000, $alpha: 0.7);
							text-align: center;
							border-bottom:1rpx solid #F6F6F6;
							overflow:hidden;
							text-overflow:ellipsis;
							white-space:nowrap;
						}
					}
				}
			}
			}
		}
	}
}
</style>